<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
 <base href="<%=basePath%>">   
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>标题</title>        
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script type="text/javascript">
	function select1() {
		$.ajax({
			url : "<%=basePath%>scoreservlet", //请求路径  
			cache : false,
			dataType : 'json', //返回值类型  
			contentType : "charset=utf-8",
			type : "GET",
			success : function(data) {
				$('#tb1').empty(); //清空resText里面的所有内容

				var html = '';
				$.each(data, function(commentIndex, comment) {
					html += '<tr class="info"><td>' + comment['id']
							+ '</td><td>' + comment['name'] + '</td><td>'
							+ comment['score'] + '</td></tr>';
				});
				$('#tb1').html(html);
			}
		});
	}
	function select2() {
		vurl = "<%=basePath%>scoreservlet";
		$.get(vurl,function(data, status) {
					var rows = JSON.parse(data);
					for (var i = 0; i < rows.length; i++) {
						var row = rows[i];
						var s=("<tr >"
								+"<td>"+row.id+"</td>"
								+"<td>"+row.name+"</td>"
								+"<td>"+row.score+"</td>"						
								+"</tr>");
						/* var s = ('<tr class="info"><td>' + comment['id']
								+ '</td><td>' + comment['name'] + '</td><td>'
								+ comment['score'] + '</td></tr>'); */
						$("#tb1").append(s);
					}
				});
	}
	//方法3

	{
		vurl = "http://localhost:8080/web/scoreservlet";
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $http) {
			$http.get(vurl).then(function(result) {
				$scope.rows = result.data;
			});
		});
	}
</script>
</head>
<body>
<%=basePath%>
<br>
<div class="container">
		<div class="row clearfix">
			<div class="col-md-8 column">
				<table class="table">
					<thead>
						<tr>
							<th>ID</th>
							<th>姓名</th>
							<th>分数</th>
						</tr>
					</thead>
					<tbody id="tb1">

					</tbody>
				</table>
			</div>
			<div class="col-md-4 column">
				<ul>
					<li>
						<h3>查询数据</h3> 
						<input id="btn1" type="button" value="查询方法1" onclick="select1()" /> 
						<input id="btn2" type="button" value="查询方法2" onclick="select2()" />
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
